<template>
	<scroll-view :style="{height:windowHeight}" scroll-y="true">
		<view class="main">
			<view class="main-item">
				<text style="color:#999999;width: 120rpx;">订单编号:</text>
				<text style="margin-left: 40rpx;width: 526rpx;">{{orderDetail.no}}</text>
			</view>
			<view class="main-item" style="margin-top: 20rpx;">
				<text style="color:#999999;">订单状态:</text>
				<text style="margin-left: 40rpx;width: 526rpx;">{{orderDetail.status.desc}}</text>
			</view>
			<view class="main-item" style="margin-top: 20rpx;">
				<text style="color:#999999;">下单时间:</text>
				<text style="margin-left: 40rpx;width: 526rpx;">{{orderDetail.paidTime}}</text>
			</view>
			<view class="main-item" style="margin-top: 20rpx;">
				<text style="color:#999999;">
					<text style="color: #ffffff;">空</text>下单人:</text>
				<text style="margin-left: 40rpx;width: 526rpx;">{{orderDetail.buyerName}}+{{orderDetail.buyerMobile}}</text>
			</view>
			<view class="main-item" style="margin-top: 20rpx;">
				<text style="color:#999999;">支付金额:</text>
				<text style="margin-left: 40rpx;width: 526rpx;">¥{{orderDetail.paidAmts}}</text>
			</view>
			<view class="main-item" style="margin-top: 20rpx;">
				<text style="color:#999999;">关联客户:</text>
				<text style="margin-left: 40rpx;width: 526rpx;">{{orderDetail.custName}}</text>
			</view>
			<view class="main-item" style="margin-top: 20rpx;">
				<text style="color:#999999;">购买商品:</text>
				<view class="goods-bg">
					<image :src="orderDetail.pics" class="goods-img"></image>
					<text class="goods-name">{{orderDetail.goodsName}}</text>
				</view>
			</view>
			
			<view v-if="orderDetail.status.code!='0'">
				
				<view class="main-item" style="margin-top: 20rpx;">
					<text style="color:#333333;font-weight: 600;">服务权益:</text>
					
				</view>
				
				<view class="main-item" style="margin-top: 20rpx;">
					<text style="color:#999999;">
						<text style="color: #ffffff;">空空空空</text>
						权益ID:
						</text>
					<text style="margin-left: 40rpx;width: 430rpx;">{{orderDetail.customerRights.no}}</text>
				</view>
				
				<view class="main-item" style="margin-top: 20rpx;">
					<text style="color:#999999;">
						<text style="color: #ffffff;">空空</text>
						服务有效期:
						</text>
					<text style="margin-left: 40rpx;width: 430rpx;">{{orderDetail.customerRights.endTime}}</text>
				</view>
				
				<view class="main-item" style="margin-top: 20rpx;">
					<text style="color:#999999;">
						可发起总咨询数:
						</text>
					<text style="margin-left: 40rpx;width: 430rpx;">{{orderDetail.customerRights.totalCount==-1?'不限':orderDetail.customerRights.totalCount}}次,限制每{{orderDetail.customerRights.cycleValue}}{{orderDetail.customerRights.cycleUnit.desc}}可咨询{{orderDetail.customerRights.cycleTimes ==-1 ? '不限':orderDetail.customerRights.cycleTimes}}次</text>
				</view>
				
				<view class="main-item" style="margin-top: 20rpx;">
					<text style="color:#999999;">
						<text style="color: #ffffff;">空空</text>
						可咨询领域:
						</text>
					<text style="margin-left: 40rpx;width: 430rpx;">{{orderDetail.customerRights.domainDict==-1 ? '不限':orderDetail.customerRights.domainDict}}</text>
				</view>
				
			</view>
			
			
			<view v-if="orderDetail.status.code=='0'" class="view-bottom-s">
				<view class="view-bottom-b"  @click="payIt">
					支付
				</view>
				
			</view>
			
			
			
			
		</view>
	</scroll-view>
	
</template>

<script>
	let app = ''
	import verify from '@/pages/utils/verifyUtils.js'
	export default{
		data(){
			return{
				role:'',
				roleUrl:'',
				
				windowHeight:0,
				id:'',
				orderDetail:null
			}
		},
		onLoad(optinos) {
			let _this = this
			app = getApp()
			_this.windowHeight = app.globalData.windowHeight  * 2 + 'rpx'
			_this.id = optinos.id
			_this.role = app.globalData.role
			_this.roleUrl =  _this.$roleUrl({tab:_this.role})
			_this.getOrderDetail()
		},
		onShow() {
			
		},
		mounted() {
			
		},
		methods:{
			async getOrderDetail(){
				let _this = this
				const res = await _this.$myRequest({
					url: "/client/goodsOrder/"+_this.id,
				})
				console.log('详情',res)
				if(res.data.code==200){
					let detail = res.data.data
					let goodsPicUrls = detail.goodsPicUrls
					if(goodsPicUrls.indexOf(',')>-1){
						goodsPicUrls = goodsPicUrls.split(',')[0]
					}
					detail.pics = _this.$imageUrls({
							picUrls:goodsPicUrls
						})
						
					let paidAmt = detail.paidAmt
					let paidAmts = ''
					if(verify.isNotEmpty(paidAmt)){
						paidAmts = (paidAmt/100).toFixed(2)
					}
					detail.paidAmts = paidAmts
					_this.orderDetail = detail
							
				}
			},
			
			
			async payIt(){
				let _this = this
				uni.showLoading({
					title: "正在支付..."
				})
							
				const res = await _this.$myRequest({
					url:`/wx/pay/create?tradeId=${_this.orderDetail.tradeId}`,
					method:'POST',//默认是GET
					// data:data,
				})
							
				uni.hideLoading()
				console.log('支付结果', res)
				if (res.data.code == 200) {
					
					uni.requestPayment({
						"timeStamp":res.data.data.timeStamp,
						"nonceStr": res.data.data.nonceStr,
						"package": res.data.data.packageValue,
						"signType": res.data.data.signType,
						"paySign": res.data.data.paySign,
						success: (payres) => {
							console.log('微信支付成功结果',payres)
							if(payres.errMsg==='requestPayment:ok'){
								uni.showToast({
									title:'支付成功!',
									icon:'success'
								})
								_this.getOrderDetail()
							}
						},
						fail: (payerr) => {
							console.log('微信支付失败结果',payerr)
							uni.showToast({
								title: payerr
							})
						}
					})
					
				} else {
					uni.showToast({
						title: res.data.msg
					})
				}
			},
		}
	}
</script>

<style>
	page{
		background-color: #ffffff;
	}
</style>
<style scoped lang="scss">
	.main{
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-top: 24rpx;
	}
	.main-item{
		display: flex;
		// align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color:#333333;
	}
	
	.goods-bg{
		width: 526rpx;
		height: 170rpx;
		background: #F7F7F7;
		border-radius: 8rpx;
		margin-left: 40rpx;
		display: flex;
	}
	.goods-img{
		width: 130rpx;
		height: 130rpx;
		border-radius: 8rpx;
		border: 1px solid #EEEEEE;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	.goods-name{
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		width: 332rpx;
		margin-top: 20rpx;
		margin-left: 12rpx;
	}
	
	
	.view-bottom-s {
		height: 108rpx;
		display: flex;
		align-items: center;
	}
	
	.view-bottom-b {
		width: 686rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		line-height: 50rpx;
		margin-left: 32rpx;
	}
</style>